<template>
  <div class="full-height">
    <view-box>
      <div class="exampage">
        <div class="header">
          <div class="header-bg">
            <img src="http://ozuwxtcxn.bkt.clouddn.com/images/party-pic.png">
          </div>
          <div class="card-title">
            <img src="http://ozuwxtcxn.bkt.clouddn.com/images/title-bg.png">
            <span class="text">开始答题咯</span>
          </div>
        </div>
        <div class="text-group">
          <p class="done-num">答题数：<span>{{ questionNum }}</span></p>
          <p class="question">{{ examnationQuestion }}</p>
        </div>
        <div class="options">
          <check-list :options="commonList" v-model="radioValue" :max="1"></check-list>
        </div>
        <div class="prompt" v-if="showText">
          请选择答案
        </div>
        <div class="result-btn">
          <button v-if="this.questionNum !== 20 ? true : false" class="nextQ" @click="nextQ(radioValue)">下一题</button>
          <button v-else class="sub" @click="submit">提 交</button>
        </div>
      </div>
    </view-box>
  </div>
</template>

<script>

import { getPhoneExamQuestion } from '@/api/exam';

export default {
  data() {
    return {
      showBtn: true,
      commonList: [],
      radioValue: [],
      examnationQuestion: '',
      checked: false,
      keyId: '',
      questionNum: 0,
      questionTotal: 20,
      questionList: [],
      rightAnswer: 0,
      showText: false
    }
  },
  methods: {
    submit() {
      this.$router.push({
        path: '/result',
        query: {
          score: this.rightAnswer*5,
          questionList: this.questionList,
          answerList: this.answerList
        }
      })
    },
    getNextQuestion() {
      this.examnationQuestion = this.questionList[this.questionNum].questionDescription;
      this.commonList = [
        this.questionList[this.questionNum].choice1,
        this.questionList[this.questionNum].choice2,
        this.questionList[this.questionNum].choice3,
        this.questionList[this.questionNum].choice4
      ];
    },
    nextQ(opt) {
        if (opt == this.questionList[this.questionNum]['choice' + this.questionList[this.questionNum].correctOption]) {
          this.rightAnswer += 1;
          // if (!sessionStorage.rightAnswer) {
          //   sessionStorage.rightAnswer = 1;
          // } else {
          //   sessionStorage.rightAnswer ++;
          // }
        }
        if (this.questionNum < 20) {
          if (this.radioValue[0] === undefined) {
            this.showText = true;
          } else {
            this.showText = false;
            this.questionNum += 1;
            if (this.questionNum < 20) {
              this.radioValue = [];
              this.getNextQuestion();
            }
          }
        }
    }
  },
  created() {
    getPhoneExamQuestion(this.questionTotal).then(res => {
      this.questionList = res.data;
      this.getNextQuestion();
    });
  }
}
</script>

<style>

</style>
